<template>
    <div class="communication_wrap">
        <div
            v-for="(item, index) in friendsGroup"
            class="friend_item"
            :key="`fri_${index}`"
        >
            <div>
                <div
                    class="grouping_name"
                    @click.stop.prevent="friendsGroupSwitch(item)"
                    @contextmenu.stop.prevent="friendEditPosition($event, item)"
                >
                    <div class="develop_icon" :class="{ active: item.switch }">
                    {{ item.NAME }}
                    </div>
                </div>
            </div>
            <div class="grouping" v-show="!item.switch">
                <div
                    v-for="(temp, cou) in item.USER"
                    :key="'fr_' + cou"
                    style="padding-left: 40px !important"
                    class="friend_hover"
                    @click.stop.prevent="toNewChat(temp, false)"
                    @dblclick.stop.prevent="dbtoNewChat(temp, false)"
                >
                    <img
                    draggable="false"
                    class="img-border"
                    :class="{ gray: temp.status == 7 }"
                    :src="
                        !$isNull(temp.HEAD)
                        ? `${$store.state.headPathUrl}${temp.ID}${temp.HEAD}.PNG`
                        : `static/image/home/person_${
                            temp.GENDER == 2 ? 2 : 1
                            }.png`
                    "
                    style="
                        vertical-align: middle;
                        margin-right: 1em;
                        width: 26px;
                        height: 26px;
                        background: #fff;
                    "
                    />
                    <!-- <img draggable="false" :class="{gray:temp.status==7}" v-lazy="!$isNull(temp.HEAD)&&!$isNull(temp.headPath)?(temp.headPath):`static/image/home/person_${temp.GENDER==2?2:1}.png`" style='vertical-align: middle;margin-right: 1em;width: 26px;height: 26px;background:#fff;' /> -->
                    <!-- <img draggable="false" :class="{gray:temp.status==7}" v-lazy="temp.HEAD?get_inline_head(temp.HEAD):`static/image/home/person_${temp.GENDER==2?2:1}.png`" style='vertical-align: middle;margin-right: 1em;width: 26px;height: 26px;background:#fff;' /> -->
                    <h3 class="communication_wrap_h3">{{ temp.NAME }}</h3>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'frequentContacts',
    props:{
        friendsGroup:{
            type: Array,
            default: () => {
                return []
            }
        }
    },
    data(){
        return{          
        }
    },
    watch:{
    },
    methods:{
        friendsGroupSwitch(item) {
            this.$set(item, "switch", !item.switch);
        },
        friendEditPosition(e,i){
            this.$emit('friendEditPosition',e,i)
        },
        toNewChat(i,b){
            this.$emit('toNewChat',i,b)
        },
        dbtoNewChat(i,b){
            this.$emit('dbtoNewChat',i,b)
        }        
    },
    created(){
    }
}
</script>